<template>
  <div class="manageTablePage">
    <div class="table" style="height: 90%; width: 60%">
      <el-table :border="true" style="height: 100%" :data="displayTableData">
        <el-table-column prop="serialNumber" label="序号" width="60">
          <template #default="scope">
            <div>
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="itemType" label="类型" width="100">
          <template #default="scope">
            {{ getItemTypeName(scope.row.itemType) }}
          </template>
        </el-table-column>
        <el-table-column prop="itemCommonWay" label="问法" width="230" />
        <el-table-column prop="attribute" label="附加信息" width="500">
          <template #default="scope">
            <div v-for="(item, index) in JSON.parse(scope.row.attribute)">
              {{ index + ": " + item }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <!-- <el-button
              size="small"
              @click="editInstructs(scope.$index, scope.row)"
              >编辑
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-config-provider :locale="zhCn">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 40, 60, 80]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          style="margin-top: 15px"
        >
        </el-pagination>
      </el-config-provider>
    </div>
  </div>
</template>
<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { cloneDeep } from "lodash-es";
import { computed, ref } from "vue";

// props中是readonly的，不能修改
// computed计算的也是readonly，不能修改
const props = defineProps({
  tableData: Array,
  editInstructs: Function,
  deleteInstructs: Function,
  remarkInstructs: Function,
  refresh: Function,
});

const currentPage = ref(1);
const pageSize = ref(20);
const totalSize = ref(0);

const displayTableData = computed(() => {
  let arr = tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
  arr.sort((x, y) => {
    return x.sortIdx - y.sortIdx;
  });
  return arr;
});

const tableData = computed(() => {
  const arr = cloneDeep(props.tableData);

  for (let i = 0; i < arr?.length; i++) {
    let item = arr?.[i];

    if (item && item.attribute) {
      item.attribute = JSON.stringify(item.attribute);
    }
  }

  totalSize.value = arr.length;

  return arr || [];
});

const getItemTypeName = (itemType) => {
  switch (Number(itemType)) {
    case 1:
      return "班级";
    case 2:
      return "年级";
    case 3:
      return "楼栋区域";
    case 4:
      return "教室";
    default:
      return "--";
  }
};

const editInstructs = (index, row) => {
  props.editInstructs(index, row);
};

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  pageSize.value = val;
  currentPage.value = 1;
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
};
</script>

<style lang="scss" scoped>
.manageTablePage {
  height: 100%;
  overflow: auto;
  display: flex;

  .bert_div {
    display: flex;
    height: 90%;
    .card_div {
      max-height: 100%;
      margin-left: 35px;
    }

    .first_card_div {
      margin-left: 80px;
    }
  }
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: none !important;
  --el-table-border-color: #aaaaaa !important;
  --el-table-border: 1px solid #ebeef5 !important;

  thead th {
    font-size: 16px !important;
    color: #5c5454 !important;
    background-color: #d9d9d9;
  }

  thead {
    border: 1px solid #999999;
  }
}

:deep(.el-card) {
  height: 100%;
  max-height: 100%;
  .el-card__body {
    overflow-y: scroll;
    height: inherit;
    max-height: calc(100% - 69px);

    padding: 5px 20px;

    margin-right: 3px; //适配滚动条间距
    padding: 0;

    .item {
      cursor: pointer;
      margin: 0;
      padding: 8px 20px;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .el-card__body::-webkit-scrollbar {
    width: 7px;
    height: 1px;
  }
  .el-card__body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(236, 236, 234);
  }

  .el-card__body::-webkit-scrollbar-track {
    border-radius: 10px;
    background: white;
  }
}
</style>
